<script setup lang="ts">
import { onMounted } from 'vue'
import { getUserData } from '@/api/user'
import type { UserDataDto } from '@/api/user/type'

const userInfo = ref<UserDataDto>({} as UserDataDto)

async function getUserInfo() {
    const res = await getUserData()
    userInfo.value = res
    console.log(111, res)
}

async function onShowPreview(url: string) {
    uni.previewImage({
        urls: [url],
        type: 'image',
    })
}

function onToModify() {
    uni.navigateTo({
        url: '/package-mine/pages/card-info/card-info',
    })
}

onMounted(() => {
    getUserInfo()
})
</script>

<template>
    <NavbarContainer>
        <view class="px-60rpx">
            <img class="mb-30rpx h-435rpx w-full rounded-lg" :src="userInfo.idCardFront" @click="onShowPreview(userInfo.idCardFront)">
            <img class="mb-30rpx h-435rpx w-full rounded-lg" :src="userInfo.idCardBack" @click="onShowPreview(userInfo.idCardBack)">
            <view class="flex items-center justify-center">
                <view class="border-1 border-primary rounded-full border-solid px-32rpx py-10rpx text-primary" @click="onToModify">我要修改</view>
            </view>
        </view>
    </NavbarContainer>
</template>

<style lang="scss" scoped></style>

<route lang="json">
{
    "style": {
        "navigationBarTitleText": "身份证照"
    }
}
</route>
